<template>
  <!-- 首页 -->
  <div>
    <!-- 轮播图 -->
    <Carousel></Carousel>
    <!-- 搜索框 -->
    <Search></Search>
    <el-row :gutter="20">
      <el-col :span="20">
        <Level @getLevel="getLevel"></Level>
        <Region @getRegion="getRegion"></Region>
        <div class="hospital" v-if="hasHospitalArr.length">
          <Card
            v-for="item in hasHospitalArr"
            :key="item.id"
            :hospital-info="item"
            class="item"
          ></Card>
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Carousel from "./carousel/index.vue";
import Search from "./search/index.vue";
import Level from "./level/index.vue";
import Region from "./region/index.vue";
import Card from "./card/index.vue";
import Tip from "./tip/index.vue";
import { ref, onMounted } from "vue";
import { reqHospitalDetail } from "@/api/home/index";
import type { Content, RootObject } from "@/api/home/type";
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);
let hasHospitalArr = ref<Content>([]);
let hostype = ref<string>("");
let districtCode = ref<string>("");

onMounted(() => {
  getReqHospitalDetail();
});

const getReqHospitalDetail = async () => {
  let res: RootObject = await reqHospitalDetail(
    pageNo.value,
    pageSize.value,
    hostype.value,
    districtCode.value
  );
  if (res.code === 200) {
    hasHospitalArr.value = res.data.content;
    total.value = res.data.totalElements;
  }
};

const getLevel = (leve: string) => {
  hostype.value = leve;
  getReqHospitalDetail();
};

const getRegion = (region: string) => {
  districtCode.value = region;
  getReqHospitalDetail();
};

const currentChange = () => {
  getReqHospitalDetail();
};
const sizeChange = () => {
  getReqHospitalDetail();
};
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
